<%--
  Created by IntelliJ IDEA.
  User: LnDamowang
  Date: 2019-01-06
  Time: 22:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <jsp:include page="${pageContext.request.contextPath}/common/common.jsp"/>
    <script>
        function searcha() {
            //返回表格的 Options。
            var opts = $("#errorTable").bootstrapTable("getOptions") ;
            var limit = opts.pageSize ;
            var offset = (opts.pageNumber-1) * limit;
            var username = $("#username").val() ;
            $.post("${pageContext.request.contextPath}/tankMain/querySearch",{'tankName':username,'limit':limit,'offset':offset},function (data) {
                // var mydata = eval("("+data+")") ;
                //重新绑定表格数据
                $("#errorTable").bootstrapTable('load',data) ;
            })
        }
        $(function () {

            $("#errorTable").bootstrapTable({
                url:'${pageContext.request.contextPath}/tankMain/querySearch',
                pagination:true,
                pageSize:2,
                pageList:[2,4,8,16],
                height:380,
                pageNumber:1,
                clickToSelect:true,
                sidePagination:'server',
                // //设置 true 将禁止多选。
                singleSelect:false,
                queryParams:function(params){
                    var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                        limit: params.limit,  //页面大小
                        offset: params.offset, //页码
                        username:$("#username").val()
                    };
                    return temp;
                },
                columns:[
                    {
                        checkbox:true
                    },
                    {
                        field:'id',
                        title:'编号'
                    },
                    {
                        field:'tank.tankName',
                        title:'油箱名称'
                    },
                    {
                        field:'tank.detail',
                        title:'损坏详情'
                    },
                    {
                        field:'date',
                        title:'损坏日期'
                    },
                    {
                        title:'操作',
                        formatter:function(value,row,index){
                            return "<button class='btn  btn-primary' onclick='weixiu(("+index+"))'><span class='glyphicon glyphicon-edit'></span>&nbsp;维修</button>"
                        }
                    }
                ]
            });
        });
        function weixiu(index) {

            var options = $("#errorTable").bootstrapTable('getOptions');
            //得到当前页
            var pn = options.pageNumber;
            $("input[name='pn']").val(pn);

            $("#errorTable").bootstrapTable("uncheckAll");
            //选中要修改的行
            $("#errorTable").bootstrapTable("check", index);
            //得到所选行的数据
            var row = $("#errorTable").bootstrapTable("getSelections")[0];
            //列表id
            $("input[name='id']").val(row.id);
            //油箱详情
            $("input[name='detail']").val(row.tank.detail);
            //油箱id
            $("input[name='tankId']").val(row.tankId);
            <!--时间日历-->
            $('#datetimepicker1').datetimepicker({
                format: 'YYYY-MM-DD',
                locale: moment.locale('zh-cn')
            });
            var adminStr = "";
            $.post("${pageContext.request.contextPath}/user/query",function (data) {
                for (var i=0;i<data.length;i++){
                    // alert(data[i].uname)
                    adminStr+='<option value="'+data[i].uid+'">'+data[i].uname+'</option>';
                }
                $("#uName").html(adminStr);
            });
            $("#weixiu").modal("show");
        }

        function doweixiu() {
            var formStr = $('#stateform').serialize();
            //处理表单控件的中文乱码
            params = decodeURIComponent(formStr, true);
            alert(params)
            $.post("${pageContext.request.contextPath}/tankMain/save",params,function (data) {
                alert(data)
              $("#errorTable").bootstrapTable('load',data);
            });
            $("#weixiu").modal("hide");
        }
    </script>
</head>
<body>
<div class="tabbable"> <!-- Only required for left/right tabs -->
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">油箱损坏情况</a></li>
        <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">油箱损坏情况列表</h3>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="">
                            <form  class="form-inline pull-right">
                                <input id="username" type="text" class="form-control">
                                <button class="btn btn-primary" onclick="searcha()" type="button"><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;搜索</button>
                            </form>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <table id="errorTable"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab2">
            <p>Howdy, I'm in Section 2.</p>
        </div>
    </div>
</div>


<div class="modal fade" id="weixiu">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">维修</h4>
            </div>
            <div class="modal-body">
                <form action="" class="form-horizontal" id="stateform">
                    <input type="hidden" name="detail">
                    <input type="hidden" name="id">
                    <input type="hidden" name="pn">
                    <input type="hidden" name="tankId">
                    <div class="form-group">
                        <label class="col-sm-3 text-right  control-label" for="tankDetail">备注:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="tankDetail" name="tankDetail"  placeholder="备注" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 text-right">维修时间</label>
                        <div class="col-sm-8">
                            <div class="input-group" id="datetimepicker1">
                                <input name="date" type='text' class="form-control" />
                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 text-right  control-label" for="price">维修金额:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="price" name="price"  placeholder="使用金额" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 text-right control-label" for=>维修人员：</label>
                        <div class="col-sm-8">
                            <select name="admin" id="uName" class="form-control">
                                <%--<option value=""></option>--%>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" onclick="doweixiu()" class="btn btn-primary">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
